<!--
 * @Descripttion:
 * @version: 1.0
 * @Author: Teemor
 * @Date: 2024-03-12 16:30:36
-->
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  needLogin: true,
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
    disableScroll: true,
  },
}
</route>
<template>
  <view class="bg-box">
    <image class="img absolute top-0 left-0 right-0" :src="img_home_bg"></image>
    <view class="relative" :style="{ paddingTop: safeAreaInsets.top + 'px' }">
      <uv-navbar title="" :bgColor="bgColor">
        <template v-slot:left>
          <view class="flex grid-items-center">
            <uv-image
              class="mr-10"
              shape="circle"
              width="68rpx"
              height="68rpx"
              duration="450"
              :fade="true"
              :src="img_home_bg"
            ></uv-image>
            <view class="ml-2"> Jeason Wu</view>
          </view>
        </template>
      </uv-navbar>

      <view class="flex pl-6 pr-6 mt-20 flex-justify-between font-size-4">
        厦门新能集智控科技
        <uv-icon name="icon_scan" custom-prefix="custom-icon" size="20" color="#fff"></uv-icon>
      </view>
      <view class="total mt-11">
        <uv-row justify="space-between" class="" gutter="10">
          <uv-col span="6">
            <view class="box pb-6">
              <view class="flex justify-center">
                <view class="title bg-#F7B500"
                  >本月新增：10
                  <uv-icon
                    name="icon_rise"
                    custom-prefix="custom-icon"
                    size="10"
                    color="#fff"
                  ></uv-icon
                ></view>
              </view>
              <view class="font-size-8 mt-3">23124</view>
              <view class="font-size-4 mt-1">设备总数</view>
            </view>
          </uv-col>
          <uv-col span="6">
            <view class="box pb-6">
              <view class="flex justify-center">
                <view class="title bg-#6DD400">在线率:100% </view>
              </view>
              <view class="font-size-8 mt-3">23124</view>
              <view class="font-size-4 mt-1">设备总数</view>
            </view>
          </uv-col>
        </uv-row>
      </view>
      <view class="status">
        <uv-row justify="space-between">
          <uv-col v-for="(item, i) in statusList" :key="i" span="3">
            <view class="item">
              <view class="b">{{ item.vlaue }}</view>
              {{ item.name }}
            </view>
          </uv-col>
        </uv-row>
      </view>
      <view class="menuBtn">
        <uv-row v-for="(item, i) in menuList" :key="i" justify="space-between" gutter="10">
          <uv-col v-for="child in item" :span="child.col">
            <view class="bg-white flex" @click="toRouter(child)">
              <view>
                {{ child.name }}
                <view class="font-size-3 mt-1 color-#969696">{{ child.tips }}</view>
              </view>
              <uv-image
                width="64rpx"
                height="64rpx"
                duration="450"
                :fade="true"
                :src="child.icon"
              ></uv-image>
            </view>
          </uv-col>
        </uv-row>
      </view>
    </view>
    <gc-tabbar />
  </view>
</template>

<script lang="ts" setup>
import icon_equipment_install from '@/static/images/icon_equipment_install@2x.png'
import icon_equipment_maintenance from '@/static/images/icon_equipment_maintenance@2x.png'
import icon_devices from '@/static/images/icon_devices@2x.png'
import icon_alarm from '@/static/images/icon_alarm@2x.png'
import icon_distribution_of_ess from '@/static/images/icon_distribution_of_ess@2x.png'
import icon_run_report from '@/static/images/icon_run_report@2x.png'
import img_home_bg from '@/static/images/img_home_bg.png'
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
const bgColor = ref('rgba(154,202,252,0)')

onLoad((query) => {
  console.log('query111:', query)
})
onPageScroll(({ scrollTop }) => {
  bgColor.value = `rgba(108,164,248,${scrollTop > 47 ? 1 : (1 / 47) * scrollTop})`
})
const statusList = ref([
  {
    name: '停机',
    vlaue: '32',
  },
  {
    name: '运行',
    vlaue: '12',
  },
  {
    name: '故障',
    vlaue: '12',
  },
  {
    name: '离线',
    vlaue: '12',
  },
])
const menuList = reactive([
  [
    {
      name: '设备安装',
      icon: icon_equipment_install,
      col: 6,
      url: '/pages/energyStorage/index',
    },
    {
      name: '设备维护',
      icon: icon_equipment_maintenance,
      col: 6,
      url: '/pages/energyStorage/index',
    },
  ],
  [
    {
      name: '设备列表',
      icon: icon_devices,
      col: 6,
      url: '/pages/energyStorage/index',
    },
    {
      name: '告警',
      icon: icon_alarm,
      col: 6,
      url: '/pages/energyStorage/index',
    },
  ],
  [
    {
      name: '储能系统分布',
      icon: icon_distribution_of_ess,
      col: 12,
      tips: '查看附近系统位置, 各省份储能系统分布',
      url: '/pages/energyStorage/index',
    },
  ],
  [
    {
      name: '运行报告',
      icon: icon_run_report,
      col: 12,
      tips: '查看近期储能系统运行统计信息',
      url: '/pages/energyStorage/index',
    },
  ],
])

const toRouter = (item) => {
  uni.navigateTo({
    url: item.url,
  })
}
/** 激活“分享给好友” */
onShareAppMessage((options: Page.ShareAppMessageOption): Page.CustomShareContent => {
  return {
    title: 'unibest',
    desc: 'unibest 演示示例',
    path: '/pages/index/index?id=xxx',
  }
})
</script>

<style lang="scss" scoped>
.bg-box {
  position: relative;

  // min-height: 100vh;
  padding-bottom: 40rpx;
  color: #fff;
  background: linear-gradient(180deg, #1b73fe 0%, rgb(63 137 255 / 10%) 100%);

  .total {
    padding: 0 20rpx;

    .box {
      position: relative;
      text-align: center;
      background: rgb(0 16 98 / 70%);
      border-radius: 30rpx;

      .title {
        display: flex;
        justify-content: center;
        min-width: 200rpx;
        padding: 6rpx 20rpx;
        font-size: 26rpx;
      }
    }
  }

  .status {
    margin: 30rpx 20rpx 0;
    background: rgb(0 16 98 / 70%);
    border-radius: 30rpx;

    .item {
      flex: 1;
      padding: 50rpx 0;
      font-size: 28rpx;
      text-align: center;

      .b {
        padding-bottom: 25rpx;
        font-size: 44rpx;
        font-weight: bold;
      }
    }
  }

  .menuBtn {
    padding: 0 20rpx;
    margin-top: 20rpx;

    .bg-white {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 150rpx;
      padding: 0 30rpx 0 45rpx;
      margin-top: 20rpx;
      overflow: hidden;
      font-size: 30rpx;
      color: #0a0a0a;
      background: rgb(255 255 255 / 80%);
      border-radius: 20rpx;
    }
  }
}
</style>
